<!DOCTYPE html>
<html lang="zh-CN">

<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>网易云音乐</title>
   <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
   <link rel="stylesheet" href="./css/mine.css">
   <link rel="stylesheet" href="./lib/iconfont/iconfont.css">
   <link rel="stylesheet" href="./css/base.css">
</head>

<body>
   <!-- 头部区域开始 -->
   <div class="topbar">
      <div class="m-top">
         <h1 class="logo">
            <a href="../index/index.html">网易云音乐</a>
         </h1>
         <ul>
            <li>
               <a href="../index/index.html">发现音乐</a>
            </li>
            <li class="active">
               <a href="./mine.html">我的音乐</a>
            </li>
            <li>
               <a href="#">关注</a>
            </li>
            <li>
               <a href="../Shopping/Shopping.html">商城</a>
            </li>
            <li>
               <a href="../musician/musician.html">音乐人</a>
            </li>
            <li class="hot">
               <a href="../download/download.html">下载客户端</a>
            </li>

         </ul>
         <div class="search">
            <span></span>
            <input type="text" placeholder="音乐/视频/电台/用户">

         </div>
         <div class="creater-center">
            <a href="../create/create.html">
               创作者中心
            </a>
         </div>
         <div class="tophead">
            <div class="user">
               <img src="./user.jpg" alt="">
            </div>
            <div class="user-list">
               <ul>
                  <li>
                     <a href="../user/user.html">
                        <i class="iconfont icon-gerenzhongxin"></i>
                        <em>我的主页</em>
                     </a>
                  </li>
                  <li>
                     <a href="#">
                        <i class="iconfont icon-xiaoxi"></i>
                        <em>我的消息</em>
                     </a>
                  </li>
                  <li>
                     <a href="#">
                        <i class="iconfont icon-dengji"></i>
                        <em>我的等级</em>
                     </a>
                  </li>
                  <li>
                     <a href="../vip/vip.html">
                        <i class="iconfont icon-yinlehuiyuan"></i>
                        <em>VIP会员</em>
                     </a>
                  </li>
                  <li>
                     <a href="#">
                        <i class="iconfont icon-gerenshezhi"></i>
                        <em>个人设置</em>
                     </a>
                  </li>
                  <li>
                     <a href="#">
                        <i class="iconfont icon-zhuanjifenshimingrenzheng"></i>
                        <em>实名认证</em>
                     </a>
                  </li>
                  <li>
                     <a href="#">
                        <i class="iconfont icon-tuichu"></i>
                        <em>退出</em>
                     </a>
                  </li>
               </ul>
            </div>
         </div>
      </div>
      <div class="m-top-line"></div>
   </div>
   <!-- 头部区域结束 -->

   <!-- 主体区域开始 -->
   <div class="m-music">
      <div class="container clearfix">
         <!-- 左边歌单列表 -->
         <div class="left">
            <div class="music-nav">
               <!-- 我的歌手 -->
               <h2 class="artist">
                  <a href="#">我的歌手(5)</a>
               </h2>
               <!-- 我的电台 -->
               <h2 class="radio">
                  <a href="#">我的电台(3)</a>
               </h2>
               <!-- 创建的歌单标题 -->
               <div class="minelst">
                  <h3>
                     <span>
                        <i class="iconfont icon-xiajiantou"></i>
                        创建的歌单 (6)
                     </span>
                     <a href="#">
                        <i>新建</i>
                     </a>
                  </h3>
               </div>
               <!-- 歌单列表 -->
               <ul class="flag first">
                  <li class="active">
                     <div class="item">
                        <div class="pic">
                           <a href="#">
                              <img src="./upload/left1.jpg" alt="">
                           </a>
                        </div>
                        <div class="text">
                           <p class="name">
                              <a href="#">
                                 我喜欢的音乐
                              </a>
                           </p>
                           <p class="count">274首</p>
                        </div>
                     </div>
                     <div class="write"></div>
                     <div class="delete"></div>
                  </li>
                  <li>
                     <div class="item">
                        <div class="pic">
                           <a href="#">
                              <img src="./upload/left2.jpg" alt="">
                           </a>
                        </div>
                        <div class="text">
                           <p class="name">
                              <a href="#">
                                 大鱼头-2的2020年度歌单
                              </a>
                           </p>
                           <p class="count">10首</p>
                        </div>
                     </div>
                     <div class="write"></div>
                     <div class="delete"></div>
                  </li>
                  <li>
                     <div class="item">
                        <div class="pic">
                           <a href="#">
                              <img src="./upload/left3.jpg" alt="">
                           </a>
                        </div>
                        <div class="text">
                           <p class="name">
                              <a href="#">
                                 大鱼头-2的2019年度歌单
                              </a>
                           </p>
                           <p class="count">10首</p>
                        </div>
                     </div>
                     <div class="write"></div>
                     <div class="delete"></div>
                  </li>
                  <li>
                     <div class="item">
                        <div class="pic">
                           <a href="#">
                              <img src="./upload/left4.jpg" alt="">
                           </a>
                        </div>
                        <div class="text">
                           <p class="name">
                              <a href="#">
                                 .
                              </a>
                           </p>
                           <p class="count">1首</p>
                        </div>
                     </div>
                     <div class="write"></div>
                     <div class="delete"></div>
                  </li>
                  <li>
                     <div class="item">
                        <div class="pic">
                           <a href="#">
                              <img src="./upload/left5.jpg" alt="">
                           </a>
                        </div>
                        <div class="text">
                           <p class="name">
                              <a href="#">
                                 m6
                              </a>
                           </p>
                           <p class="count">8首</p>
                        </div>
                     </div>
                     <div class="write"></div>
                     <div class="delete"></div>
                  </li>
                  <li>
                     <div class="item">
                        <div class="pic">
                           <a href="#">
                              <img src="./upload/left6.jpg" alt="">
                           </a>
                        </div>
                        <div class="text">
                           <p class="name">
                              <a href="#">
                                 大鱼头-2的年度歌单
                              </a>
                           </p>
                           <p class="count">10首</p>
                        </div>
                     </div>
                     <div class="write"></div>
                     <div class="delete"></div>
                  </li>
               </ul>
               <div class="minelst">
                  <h3>
                     <span>
                        <i class="iconfont icon-xiajiantou"></i>
                        收藏的歌单 (6)
                     </span>
                  </h3>
               </div>
               <ul class="flag second">
                  <li>
                     <div class="item">
                        <div class="pic">
                           <a href="#">
                              <img src="./upload/left10.jpg" alt="">
                           </a>
                        </div>
                        <div class="text">
                           <p class="name">
                              <a href="#">
                                 不得了！这些英文歌的热评信息量好大……
                              </a>
                           </p>
                           <p class="count">63首 by 团战专用小火把</p>
                        </div>
                     </div>
                     <div class="delete"></div>
                  </li>
                  <li>
                     <div class="item">
                        <div class="pic">
                           <a href="#">
                              <img src="./upload/left11.jpg" alt="">
                           </a>
                        </div>
                        <div class="text">
                           <p class="name">
                              <a href="#">
                                 华语民谣 I 孤独的心诠释诗意和远方
                              </a>
                           </p>
                           <p class="count">287首 by YouTube全球音乐</p>
                        </div>
                     </div>
                     <div class="delete"></div>
                  </li>
                  <li>
                     <div class="item">
                        <div class="pic">
                           <a href="#">
                              <img src="./upload/left12.jpg" alt="">
                           </a>
                        </div>
                        <div class="text">
                           <p class="name">
                              <a href="#">
                                 『1963-至今』日本经典动漫音乐大盘点
                              </a>
                           </p>
                           <p class="count">738首 by 佐仓小小千代</p>
                        </div>
                     </div>
                     <div class="delete"></div>
                  </li>
                  <li>
                     <div class="item">
                        <div class="pic">
                           <a href="#">
                              <img src="./upload/left7.jpg" alt="">
                           </a>
                        </div>
                        <div class="text">
                           <p class="name">
                              <a href="#">
                                 黑胶VIP爱听榜
                              </a>
                           </p>
                           <p class="count">100首 by 云音乐VIP</p>
                        </div>
                     </div>
                     <div class="delete"></div>
                  </li>
                  <li>
                     <div class="item">
                        <div class="pic">
                           <a href="#">
                              <img src="./upload/left8.jpg" alt="">
                           </a>
                        </div>
                        <div class="text">
                           <p class="name">
                              <a href="#">
                                 用户105667433的歌单
                              </a>
                           </p>
                           <p class="count">386首 by 鹏鹏苹果</p>
                        </div>
                     </div>
                     <div class="delete"></div>
                  </li>
                  <li>
                     <div class="item">
                        <div class="pic">
                           <a href="#">
                              <img src="./upload/left9.jpg" alt="">
                           </a>
                        </div>
                        <div class="text">
                           <p class="name">
                              <a href="#">
                                 攒了一大堆好听的歌想和你一起听
                              </a>
                           </p>
                           <p class="count">158首 by 鹿白川</p>
                        </div>
                     </div>
                     <div class="delete"></div>
                  </li>
               </ul>
            </div>

         </div>
         <!-- 右边个人中心歌曲列表 -->
         <div class="right">
            <!-- 歌单列表中心区域 -->
            <div class="music-main">
               <div class="m-info">
                  <div class="pic">
                     <img src="./upload/right1.jpg" alt="">
                  </div>
                  <div class="love-music">
                     <div class="hd">
                        <span></span>
                        <h4>我喜欢的音乐</h4>
                     </div>
                     <div class="user">
                        <a href="#" class="picture">
                           <img src="./upload/user.jpg" alt="">
                        </a>
                        <span class="name">
                           <a href="#">大鱼头-2</a>
                        </span>
                        <span class="time">2017-05-13 创建</span>
                     </div>
                     <div class="btns">
                        <a href="#" class="play">
                           <i>
                              <em></em>播放
                           </i>
                        </a>
                        <a href="#" class="add"></a>
                        <a href="#" class="common1">
                           <i class="collect">收藏</i>
                        </a>
                        <a href="#" class="common">
                           <i class="share">分享</i>
                        </a>
                        <a href="#" class="common">
                           <i class="download">下载</i>
                        </a>
                        <a href="#" class="common">
                           <i class="comment">评论</i>
                        </a>
                     </div>
                  </div>
               </div>
               <div class="s-title">
                  <h3>歌曲列表</h3>
                  <span class="songs">274首歌</span>
                  <span class="view">
                     播放：<i>481</i>次
                  </span>
               </div>
               <div class="music-list">
                  <div class="w1"></div>
                  <div class="w2 same">
                     <div class="tl">
                        <span>歌曲标题</span>
                     </div>
                  </div>
                  <div class="w3 same">
                     <div class="tl">
                        <span>时长</span>
                     </div>
                  </div>
                  <div class="w4 same">
                     <div class="tl">
                        <span>歌手</span>
                     </div>
                  </div>
                  <div class="w5 same">
                     <div class="tl">
                        <span>专辑</span>
                     </div>
                  </div>
               </div>
               <table>
                  <script>

                     // 右边区域歌曲列表
                     const data = [
                        { video: 1, song: '总有一天你会出现在我身边', time: '04:30', singer: '棱镜乐队', text: '一次有预谋的初次相遇' },
                        { video: 0, song: '草地上肆意奔跑', time: '03:20', singer: '傅如乔', text: '草地上肆意奔跑' },
                        { video: 0, song: '心动贩卖机', time: '03:17', singer: 'PIggy', text: '心动贩卖机' },
                        { video: 1, song: '漠河舞厅·2022', time: '05:04', singer: '柳爽', text: '漠河舞厅·2022' },
                        { video: 0, song: 'Tonight', time: '03:59', singer: 'Ludacris/John Legend', text: 'Think Like a Man (Music From & In' },
                        { video: 1, song: '负重一万斤长大', time: '04:22', singer: '太一', text: '第一次做人' },
                        { video: 0, song: '晚风', time: '03:22', singer: '7copy/BT07', text: '晚风' },
                        { video: 1, song: 'Before You Break My Heart', time: '04:30', singer: 'Stevie Hoang', text: 'Stevie Hoang: The Collection' },
                        { video: 0, song: '僕らの手には何もないけど、 - (尽管我们手中空无一物)', time: '04:12', singer: 'RAM WI', text: '僕らの手には何もないけど、' },
                        { video: 0, song: 'Little Do You Know', time: '03:01', singer: 'CFPG', text: 'Little Do You Know' },
                        { video: 0, song: 'New Boy', time: '04:16', singer: '房东的猫/陈婧霏', text: '谁是宝藏歌手 第8期' },
                        { video: 1, song: '慢慢喜欢你', time: '03:41', singer: '莫文蔚', text: '我们在中场相遇' },
                        { video: 0, song: '飘向北方 (Live)', time: '04:18', singer: '那吾克热-NW/尤长靖', text: '中国新说唱 第10期' },
                        { video: 1, song: 'Love Me Like You Do/Thinking Out Loud', time: '03:04', singer: 'Hobbie Stuart', text: 'Love Me Like You Do/Thinking Out Loud' },
                        { video: 0, song: '世界上的另一个我', time: '03:58', singer: '阿肆/郭采洁', text: '成为了这样的大人，并不可耻' },
                        { video: 1, song: 'STAY', time: '02:21', singer: 'The KidLAROI ', text: 'STAY' },
                        { video: 0, song: '没有名字的夜晚', time: '04:51', singer: '夏日入侵企画', text: '没有名字的夜晚' },
                        { video: 0, song: '被驯服的象', time: '03:30', singer: '蔡健雅', text: '天使与魔鬼的对话' },
                        { video: 0, song: '起风了', time: '05:25', singer: '买辣椒也用券', text: '起风了' },
                        { video: 1, song: '僕が死のうと思ったのは ', time: '06:22', singer: '中島美嘉', text: '僕が死のうと思ったのは' },
                        { video: 1, song: '岁月神偷', time: '04:04', singer: '金玟岐', text: '完美世界' },
                        { video: 1, song: 'Dancing in My Room', time: '03:04', singer: '347aidan', text: 'Dancing in My Room' },
                        { video: 1, song: '啷个哩个啷', time: '03:07', singer: '鹏泊', text: '啷个哩个啷' },
                        { video: 0, song: '1987我不知会遇见你 (、歌手) (⊥歌手)', time: '04:04', singer: '孟慧圆/邓见超', text: '谁是宝藏歌手 第4期' },
                        { video: 0, song: '一个人想着一个人 ', time: '03:48', singer: '如懿', text: '一个人想着一个人 ' },
                        { video: 1, song: 'Love The Way You Lie/Not Afraid', time: '02:35', singer: 'Rice', text: 'The Covers, Vol.1' },
                        { video: 1, song: '飘向北方 (Live)', time: '04:18', singer: '那吾克热-NW/尤长靖', text: '中国新说唱 第10期' },
                        { video: 1, song: 'Love Me Like You Do/Thinking Out Loud', time: '03:04', singer: 'Hobbie Stuart', text: 'Love Me Like You Do/Thinking Out Loud' },
                        { video: 0, song: 'Whistle ', time: '03:45', singer: 'Flo Rida', text: 'Whistle ' },
                        { video: 1, song: '这世界那么多人 ', time: '04:41', singer: '孟慧圆/邓见超', text: '谁是宝藏歌手 第8期 ' },
                        { video: 0, song: 'Closer ', time: '04:04', singer: 'The Chainsmokers', text: 'Closer ' },
                        { video: 1, song: '不为谁而作的歌 (Live) - (原唱 : 林俊杰) ', time: '04:28', singer: '徐佳莹/林俊杰', text: '我是歌手第四季 歌王之战 ' },
                        { video: 1, song: 'Attention ', time: '03:48', singer: 'Charlie Puth', text: 'Voicenotes ' },
                        { video: 1, song: '我怀念的 ', time: '04:48', singer: '孙燕姿', text: '逆光 ' },
                        { video: 0, song: 'Traveling Light - (轻装前行) ', time: '03:48', singer: 'Joel Hanson/Sara Groves', text: 'Traveling Light ' },
                        { video: 1, song: '乌鸦 ', time: '05:29', singer: '许嵩', text: '呼吸之野 ' },

                     ]

                     for (let i = 0; i < data.length; i++) {
                        document.write(`
         <tr>
                     <td class="tb1">
                        <div class="hd">
                           <span class="ply "></span>
                           <span class="num">${i + 1}</span>
                        </div>
                     </td>
                     <td class="tb2">
                        <div class="ttc">
                           <a href="#">${data[i].song}</a>
                           <span class="MV"></span>
                        </div>
                     </td>
                     <td class="tb3">
                        <span class="candel">${data[i].time}</span>
                        <div class="icn">
                           <span class="icn-add" title="添加到播放列表"></span>
                           <span class="icn-fav" title="收藏"></span>
                           <span class="icn-share" title="分享"></span>
                           <span class="icn-dl" title="下载"></span>
                           <span class="icn-del" title="删除"></span>
                        </div>
                     </td>
                     <td class="tb4">
                        <div class="band">
                           <a href="#">${data[i].singer}</a>
                        </div>
                     </td>
                     <td class="tb5">
                        <div class="text">
                           <a href="#">${data[i].text}</a>
                        </div>
                     </td>
                  </tr>
         `)
                     }

                     const trs = document.querySelectorAll('table tr')
                     const icns = document.querySelectorAll('tr div.icn')
                     const candels = document.querySelectorAll('tr .candel')
                     for (let i = 0; i < trs.length; i++) {
                        if (data[i].video === 0) {
                           document.querySelectorAll('.MV')[i].style.display = 'none'
                        }
                        if (i % 2 !== 0) {
                           trs[i].style.backgroundColor = '#fff'
                        }
                        trs[i].addEventListener('mouseenter', function () {
                           icns[i].style.display = 'block'
                           candels[i].style.opacity = 0
                        })
                        trs[i].addEventListener('mouseleave', function () {
                           icns[i].style.display = 'none'
                           candels[i].style.opacity = 1
                        })
                     }

                  </script>
               </table>
            </div>
            <!-- 底部评论区域 -->
            <div class="review">
               <div class="re-title">
                  <h3>评论</h3>
                  <span>共1条评论</span>
               </div>
               <div class="re-comment">
                  <div class="user-pic">
                     <img src="./upload/user.jpg" alt="">
                  </div>
                  <div class="re-content">
                     <textarea id="tx" placeholder="评论" rows="2" maxlength="140"></textarea>
                     <div class="re-btn">
                        <i class="smile"></i>
                        <i class="aite"></i>
                        <button>评论</button>
                        <span class="total">0/200字</span>
                     </div>
                  </div>
               </div>
               <div class="re-list">
                  <h3 class="new-review" style="display: none;">最新评论</h3>
                  <div class="item" style="display: none;">
                     <i class="avatar"></i>
                     <div class="picture">
                        <img src="./upload/user.jpg" alt="">
                     </div>
                     <div class="info">
                        <p class="name">大鱼头</p>
                        <p class="text">大家都辛苦啦，感谢各位大大的努力，能圆满完成真是太好了[笑哭][支持]</p>
                        <p class="time">2022-10-10 20:29:21</p>
                     </div>
                  </div>
               </div>
            </div>
         </div>

      </div>
   </div>

   <!-- 回到顶部按钮 -->
   <a href="#" class="backTop"></a>

   <!-- 网页底部浮出工具栏 -->
   <div class="f-updown">
      <!-- 锁 -->
      <div class="locks">
         <div class="lock">
            <a href="#" class="button"></a>
         </div>
         <div class="lock-right"></div>
      </div>
      <!-- 背景图 -->
      <div class="background"></div>
      <div class="hand"></div>
      <!-- 播放部分 -->
      <div class="f-play-music">
         <div class="btns">
            <a href="#" class="prev"></a>
            <a href="#" class="play"></a>
            <a href="#" class="next"></a>
         </div>
         <div class="def-cover">
            <img src="./images/default_album.jpg" alt="">
            <a href="#"></a>
         </div>
         <div class="play-process">
            <div class="words"></div>
            <!-- 外部容器 -->
            <div class="pbar">
               <!-- 包裹进度条 -->
               <div class="barbg">
                  <!-- 进度条 -->
                  <div class="ready">
                     <!-- 圆角 -->
                     <div class="curser">
                        <span class="btn"></span>
                     </div>
                  </div>
               </div>
               <span class="time">
                  <em>00:00</em>
                  / 00:00
               </span>

            </div>
         </div>
         <!-- 收藏分享部分 -->
         <div class="operations">
            <a href="#" class="icn icn-pip"></a>
            <a href="#" class="icn icn-add"></a>
            <a href="#" class="icn icn-share"></a>
         </div>
         <div class="controls">
            <!-- 音量控制按键 -->
            <a href="#" class="icn volume"></a>
            <div class="m-vol">
               <div class="barbg"></div>
               <div class="vbg">
                  <div class="curr">
                     <span class="btn"></span>
                  </div>
               </div>
            </div>
            <!-- 播放方式 -->
            <a href="#" class="icn mode"></a>
            <div class="modetip">随机</div>
            <!-- 播放列表 -->
            <span class="add">
               <a href="#" class="icn list"></a>
            </span>
            <div class="f-playlist">
               <div class="listhd">
                  <h4>播放列表（0）</h4>
                  <a href="#" class="addall">
                     <span></span>
                     收藏全部
                  </a>
                  <span class="line"></span>
                  <a href="#" class="clear">
                     <span></span>
                     清除
                  </a>
                  <span class="f-close"></span>
               </div>
               <div class="listbd">
                  <div class="listmsk">
                     <div class="msk">
                        <i></i>
                        你还没有添加任何歌曲
                        <br>
                        去首页发现音乐，或在我的音乐收听自己收藏的歌单。
                     </div>
                  </div>
                  <div class="bline"></div>
                  <div class="ask">
                     <a href="#"></a>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>

   <!-- 鼠标移入用户头像，出现下拉框 -->
   <script>
      const topHead = document.querySelector('.tophead')
      const userList = document.querySelector('.user-list')
      topHead.addEventListener('mouseenter', function () {
         userList.style.display = 'block'
      })
      topHead.addEventListener('mouseleave', function () {
         userList.style.display = 'none'
      })
   </script>

   <!-- // 左边歌单区域鼠标移入效果 -->
   <script>
      const lis = document.querySelectorAll('.first li')
      const write = document.querySelectorAll('.first .write')
      const del = document.querySelectorAll('.first .delete')
      const active = document.querySelector('.first .active')
      for (let i = 0; i < lis.length; i++) {
         lis[i].addEventListener('mouseenter', function () {
            lis[i].style.backgroundColor = '#f4f2f2'
            del[i].style.visibility = 'visible'
            write[i].style.visibility = 'visible'
            active.style.backgroundColor = '#e6e6e6'

         })
         lis[i].addEventListener('mouseleave', function () {
            lis[i].style.backgroundColor = '#f9f9f9'
            del[i].style.visibility = 'hidden'
            write[i].style.visibility = 'hidden'
            active.style.backgroundColor = '#e6e6e6'

         })
         lis[i].addEventListener('click', function () {
            lis[i].style.backgroundColor = '#e6e6e6'
         })
      }

      const liss = document.querySelectorAll('.second li')
      const dele = document.querySelectorAll('.second .delete')
      for (let j = 0; j < liss.length; j++) {
         liss[j].addEventListener('mouseenter', function () {
            liss[j].style.backgroundColor = '#f4f2f2'
            dele[j].style.visibility = 'visible'

         })
         liss[j].addEventListener('mouseleave', function () {
            liss[j].style.backgroundColor = '#f9f9f9'
            dele[j].style.visibility = 'hidden'

         })
         liss[j].addEventListener('click', function () {
            liss[j].style.backgroundColor = '#e6e6e6'
         })
      }

      // document.querySelector('.left').style.height = document.querySelector('.right').offsetHeight + 'px'



   </script>

   <!-- 评论区域 -->
   <script>
      const tx = document.querySelector('#tx')
      const total = document.querySelector('.re-content .total')
      tx.addEventListener('focus', function () {
         total.style.opacity = 1
      })
      // 2.输入框失去焦点后 让目标元素隐藏
      tx.addEventListener('blur', function () {
         total.style.opacity = 0
      })
      tx.addEventListener('input', function () {
         // 获取输入的内容
         const val = tx.value
         total.innerHTML = `${val.length}/140字`
      })

      // enter发表评论
      tx.addEventListener('keyup', function (e) {
         if (e.key === 'Enter') {
            btn.click()
         }
      })

      const btn = document.querySelector('.re-content button')
      const item = document.querySelector('.re-list .item')
      const text = document.querySelector('.re-list .text')
      btn.addEventListener('click', function () {
         const val = tx.value.trim()
         if (val === '') return alert('请输入内容')
         item.style.display = 'block'
         text.innerHTML = val
         tx.value = ''
         total.innerHTML = '0/140字'
      })

      // 评论时间
      const newDate = new Date().toLocaleString()
      document.querySelector('.re-list .time').innerHTML = newDate

   </script>

   <!-- 回到顶部按钮 -->
   <script>
      const backTop = document.querySelector('.backTop')
      const box = document.querySelector('.m-info').offsetTop
      backTop.addEventListener('click', function (e) {
         e.preventDefault()
         document.documentElement.scrollTop = 0
      })
      window.addEventListener('scroll', function () {
         const n = document.documentElement.scrollTop
         backTop.style.opacity = n >= box ? 1 : 0
      })
   </script>

   <!-- 底部浮出工具栏区域 -->
   <script>
      //阻止所有的a刷新界面
      const as = document.querySelectorAll('.f-updown a')
      for (let i = 0; i < as.length; i++) {
         as[i].addEventListener('click', function (e) {
            e.preventDefault()
         })
      }
      //底部显示隐藏
      const hand = document.querySelector('.f-updown')
      const lock = document.querySelector('.lock a')
      let flag = true
      hand.addEventListener('mouseenter', function () {
         document.querySelector('.f-updown').style.bottom = 0
      })
      function fn() {
         document.querySelector('.f-updown').style.bottom = '-45px'
      }
      hand.addEventListener('mouseleave', fn)
      //锁
      lock.addEventListener('click', function () {
         flag = !flag
         if (flag) {
            lock.classList.remove('lockdown')
            hand.addEventListener('mouseleave', fn)
         } else {
            lock.classList.add('lockdown')
            document.querySelector('.f-updown').style.bottom = 0
            hand.removeEventListener('mouseleave', fn)
         }

      })
      //进度条
      const ready = document.querySelector('.ready')
      const curser = document.querySelector('.pbar .curser')
      curser.onmousedown = function (e) {
         e = e || window.e
         const progressLeft = e.clientX - this.offsetLeft
         document.onmousemove = function (e) {
            e = e || window.e
            const progressX = e.clientX - progressLeft
            if (progressX <= 0) {
               progressX = 0;
            }
            else if (progressX >= 493) {
               progressX = 493;
            }
            curser.style.left = progressX + 'px'
            ready.style.width = progressX + 'px'
         }
         document.onmouseup = function (e) {
            e = e || window.e
            document.onmousemove = null
            document.onmouseup = null
         }
         return false
      }
      //播放按钮切换
      const play = document.querySelector('.btns .play')
      play.addEventListener('click', function () {
         flag = !flag
         if (flag) {
            play.classList.add('palse')
         } else {
            play.classList.remove('palse')
         }
      })
      //音量
      const vol = document.querySelector('.volume')
      vol.addEventListener('click', function () {
         flag = !flag
         if (flag) {
            document.querySelector('.m-vol').style.display = 'block'
         } else {
            document.querySelector('.m-vol').style.display = 'none'
         }
      })
      //音量大小调节
      const vbtn = document.querySelector('.curr .btn')
      const vcur = document.querySelector('.vbg .curr')
      vbtn.onmousedown = function (e) {
         e = e || window.e
         const progressTop = e.clientY - this.offsetTop
         document.onmousemove = function (e) {
            e = e || window.e
            const progressY = e.clientY - progressTop
            if (progressY >= 0) {
               progressY = 0;
            }
            else if (progressY <= -90) {
               progressY = -90;
            }
            vcur.style.height = -progressY + 'px'
         }
         document.onmouseup = function (e) {
            e = e || window.e
            document.onmousemove = null
            document.onmouseup = null
         }
         return false
      }
      //随机播放
      const mode = document.querySelector('.mode')
      const playmode = ['随机', '单曲循环', '循环']
      let f = 0
      mode.addEventListener('click', function () {
         if (f > 2) f = 0
         document.querySelector('.modetip').style.display = 'block'
         document.querySelector('.modetip').innerHTML = playmode[f]
         if (f === 0) {
            document.querySelector('.mode').classList.remove('mode1')
            document.querySelector('.mode').classList.remove('mode2')
         }
         if (f === 1) {
            document.querySelector('.mode').classList.add('mode1')
         }
         if (f === 2) {
            document.querySelector('.mode').classList.add('mode2')
         }
         f++
      })
      mode.addEventListener('mouseleave', function () {
         document.querySelector('.modetip').style.display = 'none'
      })
      //播放列表
      const clos = document.querySelector('.f-close')
      clos.addEventListener('click', function () {
         document.querySelector('.f-playlist').style.display = 'none'
      })
      const showadd = document.querySelector('.controls .add')
      showadd.addEventListener('click', function () {
         flag = !flag
         document.querySelector('.f-playlist').style.display = flag ? 'block' : 'none'
      })




   </script>

   <script src="./js/mine.js"></script>
</body>

</html>